const h1 = document.querySelector('h1')
const photos = document.querySelector('div.photos');
const photo = document.querySelector("img[alt='photo']")
const photoLeft = photos.offsetLeft;
const photoTop = photos.offsetTop;


photo.addEventListener('mousedown', (e) => {
    //photoLeft : div（图片区域）左边缘到页面边缘的距离
    //e.pageX : 鼠标距离页面边缘的距离
    //photo.offsetLeft : 小图片距离页面边缘的距离
    //photo_left : 鼠标到小图片边缘的距离
    const photo_left = e.offsetX;
    // const photo_left = e.pageX - photoLeft - photo.offsetLeft;
    const photo_top = e.offsetY;
    // const photo_top = e.pageY - photoTop - photo.offsetTop;

    function moving(e) {
        photo.style.left = e.pageX - photo_left - photoLeft + 'px';
        photo.style.top = e.pageY - photo_top - photoTop + 'px';
    }

    document.addEventListener('mousemove', moving, false)

    document.addEventListener('mouseup', (e) => {
        document.removeEventListener('mousemove', moving)
    }, false);


}, false);